<template>
  <f7-page>

    <!-- <div style="width:100%;padding: calc(20px * var(--ratio)) calc(32px * var(--ratio)); display: flex; justify-content: space-between;align-items: center; color: #000">
      <div class="left"><f7-link back><f7-icon f7="chevron_left" style="color: #000"></f7-icon></f7-link></div>
      <div class="title">首页</div>
      <div class="right"><f7-link><f7-icon f7="ellipsis" style="color: #000"></f7-icon></f7-link></div>
    </div> -->


    <f7-block>
      <f7-swiper class="swiper">
        <f7-swiper-slide v-for="item in 3" :key="item">
          <div class="slide-box">
            <img src="static/img/home/home-5/swiper.png" alt="" />
          </div>
        </f7-swiper-slide>
      </f7-swiper>
    </f7-block>

    <f7-block>
      <qm-notice-bar class="qm-notice-bar" color="#FFA029" background="#FFF9ED" wrapable left-icon="volume-o"
        text="用户已成功提交资料！" />
    </f7-block>

    <f7-block class="function-list">
      <qm-entry v-for="(item, index) in entry" :key="index" :data="item" iconWidth="96"></qm-entry>
    </f7-block>

    <qm-top-three class="top-three" height="117">
      <div slot="one" class="one">
        <div class="title-box">
          <div class="title">访客预约</div>
          <div class="subtitle">方便快捷 不再迷路</div>
        </div>

        <div class="btn">
          <f7-icon f7="chevron_right" class="icon"></f7-icon>
        </div>

        <div class="img">
          <img src="static/img/home/home-5/one.svg" alt="" />
        </div>
      </div>
      <div slot="two" class="two">
        <div class="title-box">
          <div class="title">访客预约</div>
          <div class="subtitle">方便快捷 不再迷路</div>
        </div>
        <div class="img">
          <img src="static/img/home/home-5/two.svg" alt="" />
        </div>
      </div>
      <div slot="three" class="three">
        <div class="title-box">
          <div class="title">访客预约</div>
          <div class="subtitle">方便快捷 不再迷路</div>
        </div>
        <div class="img">
          <img src="static/img/home/home-5/three.svg" alt="" />
        </div>
      </div>
    </qm-top-three>

    <f7-block>
      <qm-tabs line-width="calc(30px * var(--ratio))" :width="106">
        <qm-tab :title="item" v-for="(item, index) in tabs" :key="index">
          <div class="home-5-consult" v-for="(item_2, index_2) in consult" :key="index_2">
            <div class="title">
              tabs_{{ index }}: {{ item_2.title }}
            </div>
            <div class="content">
              <div class="img">
                <img src="static/img/home/consult-1.png" alt="" />
              </div>
              <div class="img">
                <img src="static/img/home/consult-2.png" alt="" />
              </div>
              <div class="img">
                <img src="static/img/home/consult-1.png" alt="" />
              </div>
            </div>
          </div>
        </qm-tab>
      </qm-tabs>
    </f7-block>

    <f7-viewbar-instince slot="fixed"></f7-viewbar-instince>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      entry: [
        {
          image: "static/img/home/home-5/entry-1.svg",
          title: "随机巡查",
          href: "/business/index",
        },
        {
          image: "static/img/home/home-5/entry-2.svg",
          title: "巡查任务",
        },
        {
          image: "static/img/home/home-5/entry-3.svg",
          title: "巡查轨迹",
        },
        {
          image: "static/img/home/home-5/entry-4.svg",
          title: "任务派单",
        },
      ],
      tabs: ["推荐", "快讯", "解读", "专家"],
      consult: [
        {
          image: "static/img/home/consult-1.png",
          title: "疫情防控不放松，个人防护第一位，进一步做好预防，确定安全。",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "天津市滨海新区8项指标成为全…",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "开展照片征集活动通知",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-1.png",
          title: "银行利率已经上调5%，将影响楼…",
          time: "2022-03-16  12:00",
        },
        {
          image: "static/img/home/consult-2.png",
          title: "天津市滨海新区13项指标成为全国标杆",
          time: "2022-03-16  12:00",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.swiper {
  height: calc(300px * var(--ratio));
  border-radius: calc(16px * var(--ratio));
  overflow: hidden;
  box-shadow: 0 calc(20px * var(--ratio)) calc(30px * var(--ratio)) rgba(69, 122, 249, 0.3);

  .slide-box {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
  }
}

.function-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.top-three {

  .one,
  .two,
  .three {
    height: 100%;
    background: #eeeeff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: calc(20px * var(--ratio)) calc(32px * var(--ratio));

    .title-box {
      .title {
        font-weight: 500;
        font-size: var(--font-size-maincontent);
        color: var(--color-text-title);
      }

      .subtitle {
        margin-top: calc(10px * var(--ratio));
        color: #9595ff;
        font-size: var(--font-size-subcontent-2);
      }
    }

    .btn {
      margin-top: calc(20px * var(--ratio));
      width: calc(34px * var(--ratio));
      height: calc(34px * var(--ratio));
      border-radius: calc(34px * var(--ratio) / 2);
      background: #a8a8fb;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow:0 3px 5px rgba(149, 149, 255, 0.4);

      .icon {
        font-size: var(--font-size-subcontent-2);
        color: var(--color-text-base);
      }
    }

    .img {
      width: calc(160px * var(--ratio));
      height: calc(140px * var(--ratio));
      position: absolute;
      bottom: 0;
      right: 0;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .two,
  .three {
    .title-box {
      .subtitle {
        margin-top: calc(3px * var(--ratio));
      }
    }

    .img {
      width: calc(110px * var(--ratio));
      height: calc(86px * var(--ratio));
    }
  }

  .two {
    background: #fff8ec;

    .title-box {
      .subtitle {
        color: #ffa93f;
      }
    }
  }

  .three {
    background: #fff7f9;

    .title-box {
      .subtitle {
        color: #ff869a;
      }
    }
  }
}

.home-5-consult {
  display: flex;
  flex-direction: column;
  padding: calc(32px * var(--ratio)) 0;

  .title {
    font-size: var(--font-size-maincontent);
    color: var(--color-text-title);
    font-weight: 500;
  }

  .content {
    margin-top: calc(20px * var(--ratio));
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    .img {
      margin-right: calc(20px * var(--ratio));
      max-width: 30%;
      width: calc(215px * var(--ratio));
      height: calc(160px * var(--ratio));
      display: table-cell;
      vertical-align: middle;
      border-radius: calc(8px * var(--ratio));
      overflow: hidden;

      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .img:last-child {
      margin-right: 0;
    }
  }
}
</style>
